<template>
  <Field
    v-if="showType === 'edit'"
    :border="border"
    :name="name"
    :label="label"
    :labelWidth="labelWidth"
    :disabled="disabled"
    :rules="rules"
  >
    <template #input v-if="showType === 'edit'">
      <van-radio-group
        v-model="currentValue"
        @change="$emit('change', currentValue, name)"
        :direction="direction"
      >
        <van-radio
          :name="o.value"
          v-for="(o,i) of list"
          :key="i"
          :shape="shape"
          class="van-radio-item"
        >{{o.label}}</van-radio>
      </van-radio-group>
    </template>
  </Field>
  <Field
    v-else-if="showType === 'view'"
    :border="border"
    :name="name"
    :readonly="true"
    :value="viewValueFn(currentValue)"
    :label="label"
    :labelWidth="labelWidth"
    type="input"
  >
    <template #button>
      <slot></slot>
    </template>
  </Field>
</template>

<script>
import common from './item'
import { Radio, RadioGroup } from 'vant'
export default {
  mixins: [common],
  components: {
    vanRadio: Radio,
    vanRadioGroup: RadioGroup
  },
  computed: {
    // checkbox、radio组的排列
    direction () {
      let o = this.info
      return o.direction || 'horizontal' // 'vertical'
    },
    // icon形状
    shape () {
      let o = this.info
      return o.shape || 'round'
    }
  },
  created () {
    if (this.showType === 'view') {
      let o = this.list.find(o => o.value === this.value)
      this.currentValue = o ? o.label : ''
    }
  }
}
</script>

<style lang="css" scoped>
.van-radio-item {
  margin-bottom: 5px;
}
</style>
